<template>
  <div class="searchPages">
    <div class="searchArea">
      <div class="searchInput">
        <input type="text" placeholder="请输入您要搜索的内容" v-model='value1' name=‘search’ autofocus @blur='showIcons' @change='showIcons' confirm-type="search" focus='true'  @confirm="searchResult">
        <i class="searchIcon" v-if='isShow' @click.stop='clearValue'></i>
      </div>
      <div class="ding" @click='goBack'>
        <span>取消</span>
      </div>
    </div>
    <div class="searchHistroy" v-if='nonResult'>
      <h4>搜索历史</h4>
      <i-icon type="trash" size="24" color="#666666" @click="clearHistory"></i-icon>
    </div>
    <ul class="historyList" v-if='showList'>
      <li v-for='(item,index) in historyListArray' :key='index'>{{item}}</li>
    </ul>
    <div v-if='hasKeyWord'>
      <div class="bookListCart" v-for='(item,index) in results' :key='index'>
        <img src="../../../static/index/ym.jpg" alt="">
        <div class="introduce">
          <h3>{{item.bookName}}</h3>
          <p class="author">{{item.authorName}}</p>

          <p class="newPrice">
            <span class="mr16">二手价 </span>
            <span class="tit">¥{{item.price}}</span>

          </p>
        </div>
        <div class="operationBtns">
          <div class="buy" v-if='item.kccount!=0'>
            <span @click='buyNow'> <i></i>立即购买</span>
          </div>
          <div class="buy buyBon" v-if='item.kccount==0'>
            <span @click='buyNow'>已售罄</span>
          </div>
          <div class="add">
            <span><i></i>加购物车</span>
          </div>
        </div>
        <div class="one" v-if='item.kccount==0'>
          仅剩一本
        </div>
      </div>

    </div>

  </div>
</template>
<script>
export default {
    data() {
        return {
            value1: '',
            isShow: false,
            hasKeyWord: false,
            count: false,
            nonResult: true,
            showList: false,
            historyListArray: [],
            results: [],
            arr: []
        }
    },
    mounted() {
        this.isShow = true
    },
    methods: {
        clearHistory() {
            this.historyListArray = []
        },
        searchResult(e) {
            console.log(e)
            this.isShow = false

            this.$http
                .post('/book/search/keyword', {
                    keyword: this.value1, // 关键词
                    page: 1,
                    pageSize: 10
                })
                .then(res => {
                    console.log(res.data.rows.length == 0)
                    if (res.data.rows.length == 0) {
                        this.hasKeyWord = false
                        this.nonResult = true
                        this.showList = true
                        wx.showToast({
                            title: '好气啊，没找到呢',
                            icon: 'none',
                            duration: 2000
                        })
                        this.historyListArray.push(this.value1)
                        this.historyListArray = Array.from(
                            new Set(this.historyListArray)
                        )
                      
                        // this.historyListArray =  Array.from(new Set(this.historyListArray.push(this.value1)))
                        // console.log(this.historyListArray)
                    } else {
                        this.results = res.data.rows
                        this.showList = false
                        this.nonResult = false
                        this.hasKeyWord = true
                    }
                })
        },
        showIcons() {
            if (this.value1 && this.value1.length != 0) {
                this.isShow = true
            }
        },
        clearValue() {
            this.value1 = ''
            this.isShow = false
            this.nonResult = true
        },
        goBack() {
            wx.navigateBack({ changed: true }) //返回上一页
        }
    }
}
</script>
<style lang="scss" scoped>
.searchPages {
    padding: 30rpx 18rpx 18rpx 18rpx;
    .searchArea {
        display: flex;

        justify-content: space-between;
    }
    .searchInput {
        border-radius: 10px;
        width: 610rpx;
        margin-right: 10rpx;
        height: 60rpx;
        padding-left: 40px;
        padding-right: 40px;
        background: url(../../../static/search/graySearch.png) no-repeat 30rpx
            center;
        background-color: #eeeeee;
        background-size: 28rpx 28rpx;
        position: relative;
        input {
            font-size: 12px;
            background: none;
            height: 60rpx;
            //   padding-right: 40rpx;
            box-sizing: border-box;

            background-size: 28rpx 28rpx;
            &::-webkit-input-placeholder {
                /* placeholder颜色  */
                color: #9f9f9f;
                /* placeholder字体大小  */
                font-size: 12px;
                /* placeholder位置  */
                text-align: right;
            }
        }
        .searchIcon {
            position: absolute;
            height: 28rpx;
            width: 28rpx;
            background: url(../../../static/search/closeSearch.png) no-repeat;
            right: 20rpx;
            top: 50%;
            transform: translateY(-50%);
            background-size: cover;
        }
    }
    .ding {
        height: 62rpx;
        width: 62rpx;
    }
    .ding span {
        font-size: 24rpx;
        display: inline-block;
        height: 100%;
        width: 100%;
        text-align: center;
        line-height: 62rpx;
        color: #ca8c5a;
    }
}
.searchHistroy {
    padding-top: 30rpx;
    display: flex;
    justify-content: space-between;
    h4 {
        font-size: 28rpx;
        font-weight: 700;
        color: #666;
    }
}
.searchResult {
    ul {
        li {
            font-size: 26rpx;
            color: #999;
            height: 60rpx;
            line-height: 60rpx;
        }
    }
}
.bookListCart {
    padding-top: 30rpx;
    padding-bottom: 30rpx;
    border-bottom: 1px solid #d9d9d9;
    overflow: hidden;
    position: relative;
    padding-left: 18rpx;
    .one {
        position: absolute;
        top: 30rpx;
        left: 18rpx;
        width: 90rpx;
        height: 126rpx;
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        font-size: 20rpx;
        line-height: 126rpx;
        text-align: center;
    }
    img {
        width: 90rpx;
        height: 126rpx;
        float: left;
        margin-right: 30rpx;
    }
    .introduce {
        float: left;
        h3 {
            font-size: 32rpx;
            color: #000;
            font-weight: bold;
        }
        .mr16 {
            margin-right: 16rpx;
        }
        .mr26 {
            margin-right: 26rpx;
        }
        .ratings {
            font-size: 28rpx;
            color: #333;
            margin-top: 20rpx;
            .mr16 {
                margin-right: 16rpx;
            }
        }
        .author {
            font-size: 24rpx;
            color: #333;
        }

        .newPrice {
            font-size: 24rpx;
            color: #333;
            margin-right: 6rpx;
            margin-top: 20rpx;
            .tit {
                display: inline-block;
                width: 96rpx;
                height: 36rpx;
                background: #c75050;
                line-height: 36rpx;
                text-align: center;
                border-radius: 5px;
                font-size: 24rpx;
                color: #fff;
            }
            .discount {
                color: #c78550;
                margin-left: 10rpx;
            }
        }
    }
    .operationBtns {
        float: right;
        margin-top: 8rpx;
        i {
            background: url('../../../static/index/card.png') no-repeat;
            display: inline-block;
            background-size: cover;
            margin-right: 8rpx;
            width: 28rpx;
            height: 20rpx;
        }
        .buy {
            width: 150rpx;
            height: 50rpx;
            border: 1px solid #c78550;
            font-size: 24rpx;
            line-height: 50rpx;
            margin-bottom: 20rpx;
            border-radius: 5px;
            span {
                display: inline-block;
                width: 100%;
                height: 100%;
                color: #c78550;
                text-align: center;
                position: relative;
                i {
                    display: inline-block;
                    background-size: cover;
                    margin-right: 8rpx;
                    width: 28rpx;
                    height: 20rpx;
                }
            }
        }
        .buyBon {
            background: #bfbfbf;

            border: 1px solid #bfbfbf;
            span {
                color: #666;
            }
        }
        .add {
            width: 150rpx;
            height: 50rpx;
            background: #c78550;
            line-height: 50rpx;
            border: 1px solid #c78550;
            border-radius: 5px;
            span {
                color: #fff;
                font-size: 24rpx;
                display: inline-block;
                width: 100%;
                height: 100%;
                text-align: center;
                i {
                    background: url('../../../static/index/addCart.png')
                        no-repeat;
                    height: 30rpx;
                    width: 30rpx;
                    background-size: cover;
                    margin-top: 10rpx;
                }
            }
        }
    }
}
.clearfix:after {
    display: block;
    clear: both;
    content: '';
    visibility: hidden;
    height: 0;
}
.clearfix {
    zoom: 1;
}
.historyList {
    li {
        height: 40rpx;
        font-size: 24rpx;
        color: #666;
    }
}
</style>

